{% stylesheet %}
.block_video {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--general_layout_spacing) 0;
}

@media screen and (max-width: 767px) {
  .block_video {
    padding: calc( var(--general_layout_spacing) * 0.5) 0;
  }
}

.block_video iframe {
  width: 100%;
}

.block_video .video_empty {
  background-color: #EEF0F5;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block_video .block_video_proportion_1 .video_empty, .block_video .block_video_proportion_1 iframe {
  height: calc(1200px / 16 * 9);
}

@media (max-width: 1200px) {
  .block_video .block_video_proportion_1 .video_empty, .block_video .block_video_proportion_1 iframe {
    height: calc(calc(100vw - 60px) / 16 * 9);
  }
}

@media screen and (max-width: 767px) {
  .block_video .block_video_proportion_1 .video_empty, .block_video .block_video_proportion_1 iframe {
    height: calc(calc(100vw - 30px) / 4 * 3);
  }
}

.block_video .block_video_proportion_2 .video_empty, .block_video .block_video_proportion_2 iframe {
  height: calc(1200px / 4 * 3);
}

@media (max-width: 1200px) {
  .block_video .block_video_proportion_2 .video_empty, .block_video .block_video_proportion_2 iframe {
    height: calc(calc(100vw - 30px) - 30px/ 4 * 3);
  }
}

.block_video_format_1 {
  display: flex;
  align-items: center;
}

.block_video_format_1 .block_title, .block_video_format_1 .block_video_content {
  flex: 1;
  flex-shrink: 0;
}

.block_video_format_2 {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.block_video_format_2 .block_title, .block_video_format_2 .block_video_content {
  flex: 1;
  flex-shrink: 0;
}

.block_video_content_format_1 {
  display: flex;
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .block_video_content_format_1 {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media screen and (max-width: 767px) {
  .block_video_content_format_1 {
    flex-direction: column;
  }
}

.block_video_content_format_1 .block_title {
  flex: 1;
  flex-shrink: 0;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .block_video_content_format_1 .block_title {
    margin-right: 0;
  }
}

.block_video_content_format_1 .block_video_content {
  flex: 1;
  flex-shrink: 0;
  margin-left: 10px;
}

@media screen and (max-width: 767px) {
  .block_video_content_format_1 .block_video_content {
    margin-left: 0;
  }
}

.block_video_content_format_1 .block_video_proportion_1 .video_empty, .block_video_content_format_1 .block_video_proportion_1 iframe {
  height: calc(1200px / 2 / 16 * 9);
}

@media (max-width: 1200px) {
  .block_video_content_format_1 .block_video_proportion_1 .video_empty, .block_video_content_format_1 .block_video_proportion_1 iframe {
    height: calc(calc(100vw / 2 - 60px) / 16 * 9);
  }
}

@media screen and (max-width: 767px) {
  .block_video_content_format_1 .block_video_proportion_1 .video_empty, .block_video_content_format_1 .block_video_proportion_1 iframe {
    height: calc(calc(100vw  - 30px) / 4 * 3);
  }
}

.block_video_content_format_2 {
  display: flex;
  flex-direction: row-reverse;
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .block_video_content_format_2 {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media screen and (max-width: 767px) {
  .block_video_content_format_2 {
    flex-direction: column;
  }
}

.block_video_content_format_2 .block_title {
  flex: 1;
  flex-shrink: 0;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .block_video_content_format_2 .block_title {
    margin-left: 0;
  }
}

.block_video_content_format_2 .block_video_content {
  flex: 1;
  flex-shrink: 0;
  margin-right: 10px;
}

@media screen and (max-width: 767px) {
  .block_video_content_format_2 .block_video_content {
    margin-right: 0;
  }
}

.block_video_content_format_2 .block_video_proportion_1 .video_empty, .block_video_content_format_2 .block_video_proportion_1 iframe {
  height: calc(1200px / 2 / 16 * 9);
}

@media (max-width: 1200px) {
  .block_video_content_format_2 .block_video_proportion_1 .video_empty, .block_video_content_format_2 .block_video_proportion_1 iframe {
    height: calc(calc(100vw / 2 - 60px) / 16 * 9);
  }
}

@media screen and (max-width: 767px) {
  .block_video_content_format_2 .block_video_proportion_1 .video_empty, .block_video_content_format_2 .block_video_proportion_1 iframe {
    height: calc(calc(100vw  - 30px) / 4 * 3);
  }
}

{% endstylesheet %}
<div class="block_video block_video_content_{{ section.settings.format }}">

    {% if section.settings.title != '' or section.settings.detail != '' %}
    <div class="block_title">
        <h2>{{ section.settings.title }}</h2>
        {% if section.settings.detail != "" %}
        <div class="block_title-detail">{{ section.settings.detail }}</div>
        {% endif %}
    </div>
    {% endif %}

    <div class="block_video_content block_video_{{ section.settings.proportion }}">
    {% if section.settings.link.value != '' %}
    <iframe  id="iframe_{{ block_id | default : section.block_id }}" src="{{ section.settings.link.model | replace: "https:", "" }}" ></iframe>
    {% else %}
    <div class="video_empty">
    {% include "icon_video" , width:"100",height:"100" %}
    </div>
    {% endif %}
    </div>
</div>

{% schema %}
{
	"tag": "",
	"class": "block_video",
	"icon": "icon-shipin",
	"name": {
		"zh_CN": "视频"
	},
	"max_blocks": "0",
	"is_global": false,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题"
			},
			"id": "title"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述"
			},
			"id": "detail"
		},
		{
			"type": "card_select",
			"id": "format",
			"option": [
				{
					"label": {
						"zh_CN": "视频居右"
					},
					"value": "format_1"
				},
				{
					"label": {
						"zh_CN": "视频居左"
					},
					"value": "format_2"
				},
				{
					"label": {
						"zh_CN": "视频居下"
					},
					"value": "format_3"
				}
			],
			"label": {
				"zh_CN": "PC版式方式"
			}
		},
		{
			"type": "card_select",
			"id": "proportion",
			"option": [
				{
					"label": {
						"zh_CN": "16:9"
					},
					"value": "proportion_1"
				},
				{
					"label": {
						"zh_CN": "4:3"
					},
					"value": "proportion_2"
				}
			],
			"label": {
				"zh_CN": "视频比例"
			}
		},
		{
			"type": "card_video",
			"error": {
				"zh_CN": "输入地址错误"
			},
			"rule": [
				"youtube"
			],
			"label": {
				"zh_CN": "视频链接"
			},
			"placeholder": {
				"zh_CN": "请输入Youtube视频的URL"
			},
			"info": {
				"zh_CN": "仅支持Youtube，请输入完整链接例如：https://www.youtube.com/watch?v=XXXXXX"
			},
			"id": "link"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"format": "format_1",
			"proportion": "proportion_1",
			"link": {
				"value": "",
				"id": "",
				"model": ""
			},
			"title": "A SERIES OF VIDEO",
			"detail": ""
		},
		"blocks": []
	}
}
{% endschema %}